<template>
  <div id="main"></div>
</template>

<script>
import * as zrender from 'zrender'
export default {
  mounted(){
    console.log(`zrender：${zrender.version}`);
    this.zr = zrender.init(document.getElementById('main'));
    // 一、文本相关 写、改、溢、富
    this.part1(100,100);
    // 二、图形相关 形状、事件、编组、扩展
    this.part2(100,300)
    // 三、动画相关 新建动画、循环动画、缓动函数、回调停止
    this.part3(100,500)
  },
  methods:{
    // 一、文本相关 写、改、溢、富
    part1(x,y){
      let circle = new zrender.Circle({
        shape:{
          cx: x,
          cy: y,
          r: 50
        },
        style:{
          fill: '#0ff',
          stroke: '#333'
        },
        textContent: new zrender.Text({
          x,
          y,
          style:{
            text: '我是文本内容',
            fill: '#f00',
            align: 'center',
            verticalAlign: 'center',
          }
        })
      })
      this.zr.add(circle)

      // 文本内容的修改（文本换行）
      // circle.getTextContent().attr('style', {text: '我是文本内容\n我是第二行'})

      // 文本外溢处理
      // circle.getTextContent().attr('style', {
      //   text: '我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容',
      //   width: 80,
      //   overflow: 'truncate', // 'break'
      // })

      // 富文本
      // circle.getTextContent().attr('style', {
      //   text: '{a|我是第一行样式a}\n{b|我是样式b}',
      //   rich:{
      //     a:{
      //       fill: '#f00',
      //       fontSize: 12,
      //       lineHeight: 20
      //     },
      //     b:{
      //       fill: '#fff',
      //       fontSize: 16,
      //       backgroundColor: '#000',
      //       padding: 4,
      //       borderRadius: 8
      //     }
      //   }
      // })
    },
    // 二、图形相关 形状、事件、编组、继承
    part2(x,y){
      let w = 100;
      let h = 100;
      // 不同的图形的绘制起点不同，用得比较多的：矩形、圆形、Path、线、五角星、图片
      let rect1 = new zrender.Rect({
        // silent: true,
        // cursor: 'move',
        shape:{
          // 自身做偏移才能满足中心对齐
          x: x - w/2,
          y: y - h/2,
          width: w,
          height: h,
          r: 10
        },
        style:{
          fill: '#fff',
          // fill: 'none',
          stroke: '#333',
          lineWidth: 2,
        },
      })
      this.zr.add(rect1)

      // 支持的事件（打开后翻到底）：http://s.thsi.cn/cd/iwc-datav-datav-front-web/components/rg/docs/
      rect1.on('click', e=>{
        console.log(e);
      })

      // 编组共用定位
      let group = new zrender.Group()
      group.position = [x + 200,y]
      let circle = new zrender.Circle({
        shape:{
          cx: 0,
          cy: 0,
          r: 50
        },
        style:{
          fill: '#0ff',
          stroke: '#333'
        },
      })
      circle.name = 'myCircle'
      group.add(circle)
      let star = new zrender.Star({
        shape:{
          cx: 0,
          cy: 0,
          n: 5,
          r: 50,
          r0: 20
        }
      })
      star.name = 'mySatr'
      group.add(star)
      this.zr.add(group)
      console.log(group.childOfName('mySatr'));

      let line = new zrender.Polyline({
        shape:{
          points:[[x+400, y+50],[x+450, y-50],[x+500, y+50],[x+550, y]],
          smooth: 0.5
        },
        style:{
          stroke: '#333',
          lineWidth: 2,
          fill: 'none'
        }
      })
      this.zr.add(line)

      // 继承
      // class Axis extends zrender.Group
    },
    // 三、动画相关 新建动画、循环动画、缓动函数、回调停止
    part3(x,y){
      let circle = new zrender.Circle({
        shape:{
          cx: x,
          cy: y,
          r: 0
        },
        style:{
          fill: 'rgba(255,255,255,0)',
          stroke: '#333'
        }
      })
      this.zr.add(circle)
      let animate = circle.animate('shape', false) // 动画是否循环
            .when(500, {r: 50})
            // 延迟开始
            .delay(1000)
            // 执行完成的回调
            .done(function(){
              console.log('done');
            })
            // 逐帧回调
            .during(function(){
              
            })
            // 缓动函数：https://echarts.apache.org/examples/zh/editor.html?c=line-easing
            .start('elasticOut')
        console.log(animate);
      // 动画控制
      // animate.start(缓动函数);
      // animate.pause();
      // animate.isPaused();
      // animate.resume();
      // animate.stop(是否将动画跳到最后一帧);
    }
  }
}
</script>

<style scoped>
#main{
  width: 80vw;
  height: 90vh;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
